<template>
    <section class="watchSection">
        <layout :isVertical="true" v-loading="loading">
            <common-toolbar text="影院服务监控">
                <el-button class="btn tms_btn" plain>
                    <span class="btn_span">
                        <img src="../../imgs/filmIcon.png" alt="">
                        <span style="color: #98C987;">TMS在线</span>
                    </span>
                </el-button>
                <el-button class="btn tms_btn" plain>
                    <span class="btn_span">
                        <img src="../../imgs/filmIcon1.png" alt="">
                        <span>TMS离线</span>
                        <span style="color: #999999;font-size: 14px;font-family: MicrosoftYaHei;">* 离线状态不支持影院服务监控</span>
                    </span>
                </el-button>
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
                
            </common-toolbar>
             <div>
                <formData ref="componentChild" :list="list" :conmonDisabled="conmonDisabled" @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
                <div class="list">
                    <ul :style="{'height':bodyHeight+'px'}">
                        <li v-for="(item,index) in data" :key="index" :class="item.onLine==false?'listGrey':'listGreen'" @click="getRouter(item)">
                            <p>{{item.cinemaNameCn}}</p>
                            <div class="list_code">
                                <div><span>专资编码：</span>{{item.cinemaCode}}</div>
                                <div><span>TMS IP：</span>{{item.manageIp}}</div>
                            </div>
                            <img src="../../imgs/filmIcon.png" alt="" v-if="item.onLine==true">
                            <img src="../../imgs/filmIcon1.png" alt=""  v-else>
                        </li>
                    </ul>
                </div>
            
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './tmsStatusWatch.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
var API_AD = window.process.config.CSMonitoring
 import formData from '@/views/form/form.vue';
   @Component({components:{
        formData
    }})
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 0;
    pageSize = 0;
    cinemaName = '';
    cinemaCode = '';

    dialogVisible = false;
    form = {
        name: '',
        code: '',
        date : ''
    };
    conmonDisabled:boolean=false;
    bodyHeight = document.documentElement.clientHeight - 170 ;
    constructor(){
        super();

    };

    searchErrorList(){
        this.onlyShowError = true;
        this.searchList();
    }

    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    }

    searchList(){
        this.data =[]
        let params = {
            pageNum: this.page,
            pageSize: this.pageSize,
            cinemaName: this.cinemaName,
            cinemaCode: this.cinemaCode,
        }
        this.loading=true;
        Service.cinemaPage(params).then(res=>{
            if(res.data.succeeded){
                this.data = res.data.data;
                this.loading=false;
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
                this.loading=false;
            }
        })
       
    }

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }
    getRouter(row) {
        // //console.log(row.manageIp,API_AD,window.process.config.Advertising)
        if(row.manageIp!='') {
          return  window.open(API_AD+'?host='+row.manageIp, '_blank')
        }else {
            return  this['$message']({
                    message: '该tms ip未设置',
                    type: 'error'
                });
        }
    }
    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(row){
         let params = {
                id: row.id
            };
            this.$router.push({
                path:'/watch/workoRderCreatDetails',
                name:'工单详情',
                params:params
            })
    }

    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }
     getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.conmonDisabled = true;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            this.page = 1
            //console.log(data)
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
            this.searchList();
        }
    created(){
        const me = this;
        this.resizeEvent();
        this.searchList();
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    mounted(){

    };

}
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
.tms_btn {
    border: none;
    &:hover {
       color: #606266; 
       cursor: default;
    }
    .btn_span {
        position: relative;
        img {
            position: absolute;
            left: -24px;
            top: -1px;
        }
    }
}
.list {
    ul {
        content: '';
        clear: both;
        display: block;
        overflow-y: auto;
        .listGrey {
            background: #EEEEEE;
        }
        .listGreen {
            background: rgba(152, 201, 135, 0.4);
        }
        li {
            margin-top: 30px;
            float: left;
            width: 22%;
            margin-left: 33px;
            padding: 25px;
            box-sizing:border-box ;
            height: 172px;
            min-height: 172px;
            border-radius: 10px;
            position: relative;
            p{
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                font-weight: bold;
                line-height: 30px;
            }
            img {
                position: absolute;
                right: 0;
                top: 0;
            }
            .list_code {
                margin-top: 10px;
                div {
                    margin-bottom: 10px;
                    color: #666666;
                }
                span {
                    color: #666666;
                    font-size: 16px;
                    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                    font-weight: bold;
                }
                p {
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>